<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制图片</title>
</head>
<body>
<div id="container">
    <canvas id="cavsImage">
      
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.querySelector('#cavsImage');
        var ctx = canvas.getContext('2d');
 
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid #ccc';
 
        //第一步，创建图片的dom对象
        var img1 = new Image();
        img1.src='images/1.jpg';//只要设置了src属性，当前img对象立即去加载图片。
        //第二步，图片加载完成后，把图片绘制到canvas上
        img1.onload = function() {
            ctx.drawImage(img1,30,30);
            ctx.drawImage(img1,250,30,img1.width*1.2,img1.height*1.2);
            for(var i=0;i<5;i++){
                ctx.drawImage(img1,30+i*20,250+i*20,img1.width*0.8,img1.height*0.8);
            }
 
            //绘制指定的裁剪图片
            //图片截取
            //参数： 1、图片对象,2、截取图片x坐标，3、截取图片Y坐标
            //4、截取图片宽，5、截取图片高，
            //6、7、绘制图片的X、y坐标， 8、9、绘制图片的宽高
            ctx.drawImage(img1,15,70,70,70,350,350,210,210);
        };
    })();
</script>
</body>
</html>

